<template>
  <div class="khtablemain">
    <el-page-header :content="titles" @back="$router.back()" />
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      style="margin-top: 20px;"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="设备类型" prop="EquipmentTypesManagementId">
        <el-select
          v-model="ruleForm.EquipmentTypesManagementId"
          filterable
          allow-create
          default-first-option
          style="width: 500px;"
          placeholder="设备类型"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备状态" prop="Status">
        <el-select
          v-model="ruleForm.Status"
          filterable
          allow-create
          default-first-option
          style="width: 500px;"
          placeholder="设备状态"
        >

          <el-option
            v-for="item in Statusarray"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="车间管理" prop="workshop">
        <el-select
          v-model="ruleForm.workshopmanagementid"
          style="width: 500px;"
          placeholder="车间管理"
        >

          <el-option
            v-for="item in workshoparray"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="规格型号" prop="model">
        <el-input v-model="ruleForm.model" />
      </el-form-item>
      <el-form-item label="设备编码" prop="code">
        <el-input v-model="ruleForm.code" />
      </el-form-item>

      <el-form-item label="使用车间" prop="workshop">
        <el-input v-model="ruleForm.workshop" />
      </el-form-item>
      <el-form-item label="生产厂家" prop="manufacturer">
        <el-input v-model="ruleForm.manufacturer" />
      </el-form-item>
      <el-form-item label="安装地点" prop="location">
        <el-input v-model="ruleForm.location" />
      </el-form-item>
      <el-form-item label="购买日期" prop="purchaseDate">
        <el-date-picker v-model="ruleForm.purchaseDate" type="datetime" placeholder="选择日期时间" />
      </el-form-item>
      <el-form-item label="设备图片">
        <el-upload
          class="upload-demo"
          drag
          name="file"
          :action="fileUpload"
          :headers="headerstoken"
          :show-file-list="false"
          :on-success="imagesuccess"
          multiple
        >
          <template #trigger>
            <div v-if="ruleForm.images">
              <el-image :src="ruleForm.images" />
            </div>
            <div v-else>
              <i class="el-icon-upload" />
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

            </div>
          </template>

          <template #tip>
            <div>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <!-- 	<el-form-item label="活动性质" prop="type">
				<el-checkbox-group v-model="ruleForm.type">
					<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
					<el-checkbox label="地推活动" name="type"></el-checkbox>
					<el-checkbox label="线下主题活动" name="type"></el-checkbox>
					<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="特殊资源" prop="resource">
				<el-radio-group v-model="ruleForm.resource">
					<el-radio label="线上品牌商赞助"></el-radio>
					<el-radio label="线下场地免费"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="活动形式" prop="desc">
				<el-input type="textarea" v-model="ruleForm.desc"></el-input>
			</el-form-item> -->
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getToken
} from '@/utils/auth'
import store from '@/store'
export default {
  name: 'GoodFrom',
  props: ['id'], // 接收ID
  data() {
    return {
      ruleForm: {
        name: '',
        model: '',
        workshop: '', // 生产厂家
        manufacturer: '',
        location: '', // 安装地点
        purchaseDate: '', // 购买日期
        avatar: '',
        introduction: '',
        images: '', // 图片保留
        imagepath: '',
        id: 0, // 主键ID
        code: '', // 设备编码
        workshopmanagementid: '',
        Status: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入活动名称',
          trigger: 'blur'
        }
        ],
        Status: [{
          required: true,
          message: '请您输入设备状态',
          trigger: 'blur'
        }], workshop: [{
          required: true,
          message: '请您输入生产厂家',
          trigger: 'blur'
        }], location: [{
          required: true,
          message: '安装地点不能为空',
          trigger: 'blur'
        }], purchaseDate: [{
          required: true,
          message: '购买日期不能为空',
          trigger: 'blur'
        }]
        // menu_name_list: [{
        //     required: true,
        //     message: '请您输入角色名称',
        //     trigger: 'blur'
        // }],
        // username: [{
        //     required: true,
        //     message: '请您输入帐号信息',
        //     trigger: 'blur'
        // }]
      },
      loading: false,
      titles: '',
      value: [], // 下拉框的值
      options: [], // 下拉框的列表
      listarray: [], // 设备类型
      token: '', //
      fileUpload: '', // imageURl地址
      isReadonly: true, // 初始化为 true，需要时设为 false
      workshopmanagementid: '',
      Status: '',
      workshop: '',
      headerstoken: {
        'x-token': getToken()
      },
      workshoparray: [], // 车间下拉框
      Statusarray: [
        { id: 10, value: '正常' }, { id: 20, value: '其他' }]
    }
  }, mounted() {
    // 如果ID不是为空，那么就得调用详情了

    if (this.id == '0') {
      this.titles = '新增'
      return
    }

    if (this.id) {
      this.titles = '编辑'
      // console.log('传值过来的数据', this.id)
      this.$store.dispatch('ZL_Equipmentmanagement/getguid', { id: this.id })
        .then(res => {
          if (res.code == 0) {
            // this.tableData = res.data;
            // console.log('单个获取', res.data)
            this.ruleForm.name = res.data.name
            this.ruleForm.EquipmentTypesManagementId = res.data.equipmentTypesManagementId
            this.ruleForm.model = res.data.model
            this.ruleForm.code = res.data.code
            this.ruleForm.Status = res.data.status
            this.ruleForm.workshop = res.data.workshop
            this.ruleForm.manufacturer = res.data.manufacturer
            this.ruleForm.location = res.data.location
            this.ruleForm.purchaseDate = res.data.purchaseDate
            this.ruleForm.workshopmanagementid = res.data.workshopmanagementid

            // this.ruleForm.username = res.data.username;
            // this.ruleForm.password = res.data.password;
            // this.ruleForm.listarray = res.data.listarray;
            this.ruleForm.images = res.data.imagePath
            this.ruleForm.imagepath = res.data.imagePath

            // 		khname: '',
            // khdq: '',
            // khtel: '',
          } else {
            this.$message.error(res.msg)
            return
          }
        })
        .catch((errora) => {
          console.log(errora)
        })
    } else {
      this.titles = '新增'
    }
  },
  // 加载界面的时候执行
  created() {
    // this.Cityquery();
    this.getquery()// 设备类型
    this.getqueryall()// 车间下拉框
    // 获取token信息
    this.token = getToken()
    // console.log('token', this.token)
    this.fileUpload = store.getters.fileUpload
    // console.log('测试-fileUpload', this.fileUpload);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.id) {
            // console.log('123132123')
            this.ruleForm.id = this.id
          }

          this.ruleForm.avatar = this.ruleForm.images

          const selectedId = this.ruleForm.Status
          const selectedItem = this.Statusarray.find(item => item.id === selectedId)
          const selectedValue = selectedItem ? selectedItem.value : '' // 如 '正常'/'其他'

          const selectedIdeq = this.ruleForm.EquipmentTypesManagementId
          const selectedItemeq = this.options.find(item => item.id === selectedIdeq)
          const selectedValueeq = selectedItemeq ? selectedItemeq.name : '' // 如 '正常'/'其他'

          const selectedIdeqworkshopmanagementid = this.ruleForm.workshopmanagementid
          const selectedItemeqworkshop = this.workshoparray.find(item => item.id === selectedIdeqworkshopmanagementid)
          const selectedValueeqworkshop = selectedItemeqworkshop ? selectedItemeqworkshop.name : '' // 如 '正常'/'其他'

          this.ruleForm.statusname = selectedValue
          this.ruleForm.equipmenttypesmanagementname = selectedValueeq
          this.ruleForm.workshopmanagementname = selectedValueeqworkshop

          console.log(selectedIdeq + '-' + selectedValueeq)
          this.$store.dispatch('ZL_Equipmentmanagement/add', this.ruleForm)
            .then(res => {
              if (res.code == 0) {
                this.loading = false
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.$router.back()
                  }
                })
              } else {
                this.loading = false
                this.$message.error(res.msg)
                return
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 查询下拉框
    Cityquery() {
      this.$store.dispatch('khtable/Cityquery', {})
        .then(res => {
          if (res.code == 0) {
            this.options = res.data
          } else {
            this.$message.error(res.msg)
            return
          }
        })
        .catch((errora) => {
          console.log(errora)
        })
    },
    // 图片回调
    imagesuccess(res) {
      // console.log('成功的回调', res);
      this.ruleForm.images = store.getters.apiurl + res.data
      this.ruleForm.imagepath = store.getters.apiurl + res.data
      console.log(this.ruleForm.images)
    },	// 查询列表信息 查询下拉框
    getquery() {
      this.$store.dispatch('ZL_Equipmentmanagement/getqueryall', { page: 1, limit: 9999 })
        .then(res => {
          if (res.code == 0) {
            this.options = res.data
          } else {
            this.$message.error(res.msg)
            return
          }
        })
        .catch((errora) => {
          console.log(errora)
        })
    }, getqueryall() {
      this.$store.dispatch('ZL_WorkshopManagement/getqueryall', { page: 1, limit: 9999 })
        .then(res => {
          if (res.code == 0) {
            this.workshoparray = res.data
          } else {
            this.$message.error(res.msg)
            return
          }
        })
        .catch((errora) => {
          console.log(errora)
        })
    }
  }
}
</script>

<style lang="scss">
.khtablemain {
    margin: 20px;
    ;

    .el_image {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}
</style>
